<template>
  <div class="agreement">
    <Tabs :text="text">
      <Search @data="upState" 
      v-if="searchState" 
      ref="search"
      @easySearch="easySearch"/>
    </Tabs>

    <template v-if="searchItemState">
      <SesrchItem v-if="state"/>
    </template>
    <template>
      <SearchTypes
        :state="state"
        :addList="addList"
        @setState="setState"
      />
    </template>

    <router-view />
  </div>
</template>

<script>
import Search from "../components/Search.vue";
import Tabs from "../components/Tabs.vue";
import SesrchItem from "../components/AgreementItem.vue";
import SearchTypes from "../components/SearchTypes.vue";
import { mapMutations } from 'vuex';
export default {
  components: {
    Search,
    Tabs,
    SesrchItem,
    SearchTypes,
  },
  data() {
    return {
      state: false,
      searchItemState: true,
      searchState: true,
      addList: "/agreement/increaseContranct",
      addAfterSale: "/agreement/Edit/",
      text: [
        {
          id: "0",
          textName: "合同列表",
          url: "/agreement/agreementNext",
        },
        {
          id: "1",
          textName: "今日新增",
          url: "/agreement/todayIncrease",
        },
        {
          id: "2",
          textName: "本周新增",
          url: "/agreement/weekIncrease",
        },
        {
          id: "3",
          textName: "本月新增",
          url: "/agreement/monthIncrease",
        },
        {
          id: "4",
          textName: "今日到期",
          url: "/agreement/todayDeal",
        },
        {
          id: "5",
          textName: "本周到期",
          url: "/agreement/weekDeal",
        },
        {
          id: "6",
          textName: "本月到期",
          url: "/agreement/monthDeal",
        },
        {
          id: "7",
          textName: "数据导出",
          url: "/agreement/agreementNext",
        },
        {
          id: "8",
          textName: "新增合同",
          url: "/agreement/increaseContranct",
        },
      ],
      position: [],
    };
  },
  methods: {
     ...mapMutations(['setSearchVal']),

    upState(data) {
      this.state = !data;
    },

    easySearch(val) {
      this.setSearchVal(val);
    },

    setState(searchItemState, state) {
      this.searchItemState = searchItemState;
      this.state = state;
      if (this.$refs.search) {
        this.$refs.search.flag = state;
      }
      console.log(this.searchItemState);
      console.log(this.state);
    },
  },
    watch: {
    $route(to) {
      console.log(to.path);
      if (
        to.path == "/agreement/Edit/" ||
        to.path == "/agreement/addkinds"
      ) {
        this.searchState = false;
      } else {
        this.searchState = true;
      }
    },
  },
};
</script>

<style>
</style>